<template>
	<view>
		<!-- <up-navbar autoBack placeholder bgColor="#BDDDF4" title="账户管理"></up-navbar> -->
		<view class="my-bg">
			<view class="centerY pad-30">
				<image class="avatar" mode="widthFix" src="@/static/image/logo.png"></image>
				<view class="mar-left-30">
					<view class="font-36 color-text">{{userInfo.name}}</view>
					<view class="font-30 color-646464">{{userInfo?.tel?.replace(/^(\d{3})\d{4}(\d{4})$/, '\$1****\$2')}}</view>
				</view>
			</view>

			<view class="pad-24">
				<view class="bg-white radius20">
					<up-cell :titleStyle="{'fontSize': '28rpx'}" :rightIconStyle="{'fontSize': '24rpx'}"
						v-for="(item,index) in cellList" :icon="item.icon" :key="index" @click="jumpCell(item.path)"
						:border="false" size="large" :title="item.title" isLink></up-cell>
				</view>
			</view>
		</view>
		<my-popup content="您确定退出吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { loginOut, getuserInfo } from '@/api/currency.js'
	import { onShow } from '@dcloudio/uni-app'

	let cellList = ref([
		// {
		// 	icon: "/static/image/icon4.png",
		// 	title: "修改登录密码",
		// 	path: "/pages/my_actions/editPassword/editPassword"
		// },
		{
			icon: "/static/image/icon5.png",
			title: "退出登录",
			path: "out"
		},
	])
	
	const userInfo = ref({});

	const isPopup = ref(false);
	const jumpCell = (path) => {
		if (path == 'out') {
			isPopup.value = true;
		} else {
			uni.navigateTo({
				url: path
			})
		}
	}

	// 确认退出
	const hanldeConfirm = () => {
		loginOut().then(res => {
			if (res?.code == 200) {
				uni.removeStorageSync('jwt_token');
				uni.removeStorageSync('refresh_token');
				uni.removeStorageSync('userId');
				uni.removeStorageSync('loginStatus');
				// uni.removeStorageSync('ref_query');
				uni.reLaunch({
					url: '/pages/ChooseRole/ChooseRole'
				})
			}
		})
	}

	onShow(() => {
		getuserInfo().then(res => {
			if (res.code == 200) {
				userInfo.value = res.data.info;
			}
		})
	})
</script>

<style scoped>
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: env(safe-area-inset-top);
	}

	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
</style>